<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="https://www.houdunren.com" id="form">
      用户名：<input type="text" name="userName" />
      <hr />
      <input type="checkbox" name="copyright" />接受协议
      <hr />
      <button>提交</button>
    </form>

    <script>
      function query(el) {
        return document.querySelector(el);
      }
      query("#form").addEventListener("submit", function (event) {
        let user = query('[name="userName"]').value.trim();
        let copyRight = query('[name="copyright"]').checked;
        console.log(copyRight); // true或false
        if (!user || copyRight === false) {
          event.preventDefault(); // 组织默认行为
          alert("请填写用户名或密码");
          console.error("验证失败");
        }
      });
    </script>
  </body>
</html>
